<template>

 
 <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">主页面</el-breadcrumb-item>
          <el-breadcrumb-item>繁殖与生育信息</el-breadcrumb-item>
          <el-breadcrumb-item>公牛采精信息修改</el-breadcrumb-item>
         </el-breadcrumb>
  <el-divider/>

  <el-descriptions title="公牛修改窗口" :column="3"  border>

    <!-- 牛的耳号 -->

    <el-descriptions-item label="牛的耳号" >

      <el-input v-model="collectSemenLog.cattleId" style="width: 220px" placeholder="请输入耳号" clearable />

    </el-descriptions-item>

    <el-descriptions-item label="采精时间" >

      <el-date-picker v-model="collectSemenLog.collectSemenDateValue" type="date" placeholder="请输入采精时间" />

    </el-descriptions-item>


       <el-descriptions-item label="采精状态">

      <el-select v-model="collectSemenLog.state" clearable placeholder="请选择受精状态" style="width: 220px">

        <el-option

          v-for="item in state_list"

          :key="item.value"

          :label="item.label"

          :value="item.value"

        />

      </el-select>

    </el-descriptions-item>


  </el-descriptions>

  <el-divider/>
  <!-- 添加按钮 -->

   <el-button type="primary" round @click="updateMaleCattleSemen" >修改</el-button>


   

</template>


<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';

let state_list = [

  {

    value: '采精成功',

    label: '采精成功',

  },

  {

    value: '采精失败',

    label: '采精失败',

  }

];



const urlParams = new URLSearchParams(window.location.search);
let  cattleId= urlParams.get('cattleId')

const collectSemenLog= ref({
 
  cattleId: cattleId,
  collectSemenDate: '',
 collectSemenDateValue: null as Date | null, 
  state: '',

});

function refresh() {
    location.reload();
  }

 function updateMaleCattleSemen() {

    collectSemenLog.value.collectSemenDate = collectSemenLog.value.collectSemenDateValue?.toISOString().split('T')[0];
 axios.post("http://localhost:8080/collectSemenLog/updateCollectSemenLog", collectSemenLog.value)

    .then(function (response) {

      console.log(response.data);

    })

    .catch(function (error) {

      console.error(error);

    });
    refresh();
}

</script>


